<template>
  <el-dropdown>
    <span>
      <svg-icon icon-class="language" />
    </span>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="$i18n.locale === 'zh'" @click.native="zh('zh')">中文</el-dropdown-item>
        <el-dropdown-item :disabled="$i18n.locale === 'en'" @click.native="zh('en')">en</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import cookei from 'js-cookie'
export default {
  name: 'Lang',
  methods: {
    zh(x) {
      this.$i18n.locale = x
      // 有的内部组件要刷新页面才可以转换
      /*
      this.$router.go(1)  前进
      this.$router.go(0)  刷新
      this.$router.go(-1) 后退
      */
      cookei.set('lang', x) // 存储

      this.$router.go(0) // 刷新
    }
  }
}
</script>

<style lang="scss" scoped>
  .svg-icon {
    fill: #fff;
    font-size: 20px;
  }

</style>
